<template>
    <div class="introduce">
        <el-image
            :src="introduce.src"
            class="introduce-el-img"
            fit="fill"
        ></el-image>
        <div class="introduce_content">
            <div class="introduce_title" v-if="introduce.title">
                {{ introduce.title }}
            </div>
            <div
                :class="[
                    type == 1 ? 'introduce_txt1' : 'introduce_txt2',
                    'introduce_txt',
                ]"
            >
                {{ introduce.txt }}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "introduceModule",
    props: {
        introduce: {
            type: Object,
            default: () => {
                return {};
            },
        },
        type: {
            type: Number,
            default: () => {
                return 1;
            },
        },
    },
    data() {
        return {};
    },
    methods: {},
    created() {},
    mounted() {},
    watch: {},
};
</script>
<style lang="scss" scoped>
.introduce {
    width: 100%;
    height: 100%;
    position: relative;
    .introduce-el-img {
        width: 100%;
        height: 100%;
    }
    .introduce_content {
        position: absolute;
        top: 20px;
        left: 20px;

        .introduce_title {
            font-size: 14px;
            font-weight: 700;
            color: #6da1d3;
            line-height: 24px;
            margin-bottom: 20px;
        }

        .introduce_txt {
            font-size: 13px;
            font-weight: 400;
            color: #333;
            line-height: 24px;
        }

        .introduce_txt1 {
            width: 269px;
        }

        .introduce_txt2 {
            font-size: 12px;
            width: 209px;
            line-height: 22px;
        }
    }
}
</style>